<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>bootstrap_table_demo</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="jquery-3.3.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <style>div{ } .container-fluid,.col-12{ padding:0px; } #head_img{ background-image:url(fbkg.jpg); height:200 px; background-repeat: no-repeat; background-size: cover; background-position:0px -232px; opacity:1.0; z-index:100; } #content_img{ background-image:url(fbkg.jpg); height:200 px; background-repeat: no-repeat; background-size: cover; background-position:0px -232px; opacity:0.7; padding-top:20px; }</style></head>
  
  <body>
    <div class="container-fluid">
      <!-- 页头（折叠水平导航栏） -->
      <div class="col-12">
        <div class="pos-f-t" id="head_img">
          <div class="collapse" id="navbarToggleExternalContent" style="opacity: 1">
            <div class="p-4">
              <h4 class="text-white">Collapsed content</h4>
              <span class="text-muted">Toggleable via the navbar brand.</span></div>
          </div>
          <nav class="navbar navbar-dark" style="opacity: 1">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <form class="form-inline navbar-form pull-right" style="opacity: 1">
              <input class="form-control" type="text" placeholder="Search">
              <button class="btn btn-success-outline btn-success" type="submit">Search</button></form>
          </nav>
        </div>
      </div>
      <div class="col-12">
        <!-- 轮播图 -->
        <div id="carouselExampleIndicators" class="carousel slide w-100" data-ride="carousel" style="height:0px position:absolute">
          <ol class="carousel-indicators" style="height:300px">
            <!-- 隐藏轮播图切换图标 <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            -->
          </ol>
          <div class="carousel-inner" style="height:550px">
            <div class="carousel-item active">
              <img class="d-block w-100" src="carousel_1.jpg" alt="First slide"></div>
            <div class="carousel-item">
              <img class="d-block w-100" src="carousel_2.jpg" alt="Second slide"></div>
            <div class="carousel-item">
              <img class="d-block w-100" src="carousel_3.jpg" alt="Third slide"></div>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <!-- 隐藏轮播图切换图标 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
            -->
          </a>
          <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <!-- 隐藏轮播图切换图标 <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            -->
          </a>
        </div>
      </div>
      <!-- 页头（折叠水平导航栏）end -->
      <div class="row" id="content_img" align="center">
        <!-- 垂直导航栏（滚动监听） -->
        <div class="col-6 col-md-2">.col-6 .col-md-2
          <div id="list-example" class="list-group">
            <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
            <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
            <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
            <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
            <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
            <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
            <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
            <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
            <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
            <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
            <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
            <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
            <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
            <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
            <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
            <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a></div>
        </div>
        <!-- 导航栏（滚动监听）end -->
        <!-- 动态标签页 -->
        <div class="col-12 col-md-10">.col-12 .col-md-10
          <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="tab" href="#home">Home</a></li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a></li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a></li>
          </ul>
          <div class="tab-content">
            <div id="home" class="tab-pane active">
              <br>
              <h3>HOME</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th></tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td></tr>
                  <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td></tr>
                  <tr>
                    <th scope="row">3</th>
                    <td colspan="2">Larry the Bird</td>
                    <td>@twitter</td></tr>
                </tbody>
              </table>
            </div>
            <div id="menu1" class="tab-pane fade">
              <br>
              <h3>Menu 1</h3>
              <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
              <table class="table table-hover table-dark">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th></tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td></tr>
                  <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td></tr>
                  <tr>
                    <th scope="row">3</th>
                    <td colspan="2">Larry the Bird</td>
                    <td>@twitter</td></tr>
                </tbody>
              </table>
            </div>
            <div id="menu2" class="tab-pane fade">
              <br>
              <h3>Menu 2</h3>
              <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
            </div>
          </div>
          <!-- 动态标签页end -->
          <div class="row">
            <div class="col-6">.col-6</div>
            <div class="col-6">.col-6</div></div>
        </div>
        <div class="col-6">.col-6</div>
        <div class="col-6">.col-6</div></div>
    </div>
    </div>
  </body>

</html>